<template>
  <div class="wb-item-swiper-select" v-if="qItem">
    <div class="flex-con"   :style="flexConStyle">
      <img :src="url" alt=""  class="swiper-select" :style="swiperStyle" :data-index="index">
      <img :src="qItem.btnImg" alt="" class="btn" :style="btnStyle" @click.stop="toClick">
    </div>
  </div>
</template>
<script>
import { utils } from '@/components/utils/utils'
import { commonUtils } from '@/components/utils/common-utils'
import { getPxOVwByValue } from '@/store/utils'
import { ref } from 'vue'
export default {
  mixins: [utils, commonUtils],
  props: {
    item: Object,
    qItem: Object,
    clickQuestionType: Object,
    ruleValues: Object,
    dimensionIndexs: Array,
    index: Number,
  },
  setup () {
    let isSelected = ref(false)
    return {
      isSelected
    }
  },
  created(){
  },
  computed: {
    swiperStyle(){
      let style = { width: 100, height: 200}
      if(this.qItem.urlStyle){
        style.width = this.qItem.urlStyle.split(',')[0]
        style.height = this.qItem.urlStyle.split(',')[1]
      }
      return {
        "width": getPxOVwByValue(style.width),
        "height": getPxOVwByValue(style.height)
      }
    },
    btnStyle(){
      let style = { width: 100, height: 50}
      let str
      if(this.qItem.btnStyle && this.qItem.btnStyle.length > 0){
        str  = this.qItem.btnStyle.split(',')
        style.width = str[0]
        style.height = str[1]
        style.left = str[2] || 0
        style.top = str[3] || 0
      }
      return {
        "width": getPxOVwByValue(style.width),
        "height": getPxOVwByValue(style.height),
        "margin-top": getPxOVwByValue(style.top),
        "margin-left": getPxOVwByValue(style.left),
      }
    },

    flexConStyle(){
      let url = ''
      if(this.commonAttr.bgSelectUrl && this.isSelected){
        url = this.commonAttr.bgSelectUrl
      }else{
        url = ''
      }
      return {
        "backgroundImage": "url(" + url + ")",
        "background-repeat": "no-repeat",
        "background-size": "contain"
      }
    },
    url(){
      if(this.isSelected && this.qItem.selectUrl){
        return this.qItem.selectUrl
      }else{
        return this.qItem.url
      }
    }
  },
  methods:{
    onSelect(e, index, slideTo, resetSwiper){
      this.isSelected = this.index === index ? true : false
      let jumpUrl = 'carousel_' + index + "_qIndex_" + this.index
      let comType = "click"
      let wModule = "jump"
      this.onPostStatics(e, { comType, wModule,  jumpUrl })
    },
    toClick(){
      if (top.location != self.location) {
          top.location.href = this.qItem.btnUrl
        } else {
          this.openLinkBySelfUrl(this.qItem.btnUrl);
        }
    }
  },
};
</script>

<style lang="scss">
.wb-item-swiper-select{
  width: inherit;
  height: inherit;
  .flex-con{
    display: flex;
    flex-direction: column;
    flex: auto;
    flex-wrap: wrap;
    justify-content: space-between;
    align-items: center;
    padding: 10px;
  }
}
</style>
